<!-- 请帮我创建一个完整的运营位管理Vue组件，具体要求：

**组件结构：**
- 使用 `<script setup lang="ts">` 语法
- Composition API + TypeScript
- 导入必要的依赖：vue, element-plus, 自定义请求工具

**核心功能：**
1. 数据获取和展示
   - 组件挂载时自动获取运营位列表
   - 使用ref管理响应式数据
   - 表格展示：ID、封面、名称、内容、落地页、创建时间、状态、操作

2. 状态管理功能
   - 启用/禁用运营位状态切换
   - 实时更新表格数据
   - 操作确认和结果提示

3. 错误处理
   - 网络错误处理
   - 权限验证（401跳转登录）
   - 服务器错误处理
   - 用户友好的错误提示

**UI设计要求：**
- 使用Element Plus组件：表格、按钮、标签、消息提示
- 响应式布局和美观样式
- 图片预览功能
- 加载状态显示 -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { 
  RequestPath, 
  startRequest
} from '../base/RequestWork';
import type { 
  OperationalResponseData, 
  OperationalItemData 
} from '../base/RequestWork';
import { ElMessage } from 'element-plus';
import AccountStore from '../base/AccountStore';

// 列表绑定的数据
let tableData = ref<OperationalItemData[]>([]);

// 获取账户信息
const account = AccountStore();

// 组件挂载时的生命周期函数
onMounted(() => {
  // 检查是否已登录
  if (!account.token) {
    ElMessage.error('请先登录');
    return;
  }

  console.log('开始获取运营位数据...');
  
  // 请求所有运营位数据
  startRequest(RequestPath.operationalGet, 'get', { status: 0 })
    .then((response: any) => {
      console.log('获取运营位数据成功:', response);
      
      const data = response as OperationalResponseData;
      if (data.msg === 'ok') {
        tableData.value = data.datas ?? [];
        ElMessage.success(`成功加载 ${tableData.value.length} 条运营位数据`);
      } else {
        ElMessage.error(data.error || '获取数据失败');
      }
    })
    .catch((error) => {
      console.error('获取运营位数据失败:', error);
      
      if (error.response) {
        // 服务器返回的错误
        const statusCode = error.response.status;
        const responseData = error.response.data || {};
        
        if (statusCode === 401) {
          ElMessage.error('权限不足，请重新登录');
          account.logout();
          window.location.href = '/#/login';
        } else if (statusCode === 400) {
          ElMessage.error(responseData.error || '请求参数错误');
        } else if (statusCode === 500) {
          ElMessage.error('服务器内部错误，请联系管理员');
        } else {
          ElMessage.error(responseData.error || '获取数据失败');
        }
      } else if (error.request) {
        // 网络错误
        ElMessage.error('网络错误：请检查后端服务是否正常运行');
      } else {
        // 其他错误
        ElMessage.error(error.message || '获取数据失败');
      }
    });
});

// 更新运营位状态的方法
function changeState(item: OperationalItemData) {
  console.log('更新运营位状态:', item);
  
  // 检查是否已登录
  if (!account.token) {
    ElMessage.error('请先登录管理员账号');
    return;
  }

  const newStatus = item.status === 0 ? 1 : 0;
  
  startRequest(RequestPath.operationalUpdate, 'post', {
    status: newStatus,
    id: item.id
  })
    .then((response: any) => {
      console.log('更新状态成功:', response);
      
      if (response.msg === 'ok') {
        // 请求成功后，修改列表绑定的数据
        tableData.value.forEach((element: OperationalItemData) => {
          if (element.id === item.id) {
            element.status = newStatus;
          }
        });
        
        ElMessage.success(`运营位 ${newStatus === 1 ? '启用' : '禁用'} 成功`);
      } else {
        ElMessage.error(response.error || '更新状态失败');
      }
    })
    .catch((error) => {
      console.error('更新状态失败:', error);
      
      if (error.response) {
        const statusCode = error.response.status;
        const responseData = error.response.data || {};
        
        if (statusCode === 401) {
          ElMessage.error('权限不足，请重新登录管理员账号');
          account.logout();
          window.location.href = '/#/login';
        } else if (statusCode === 400) {
          ElMessage.error(responseData.error || '请求参数错误');
        } else if (statusCode === 500) {
          ElMessage.error('服务器内部错误，请联系管理员');
        } else {
          ElMessage.error(responseData.error || '更新状态失败');
        }
      } else if (error.request) {
        ElMessage.error('网络错误：请检查后端服务是否正常运行');
      } else {
        ElMessage.error(error.message || '更新状态失败');
      }
    });
}
</script>

<template>
  <div class="contentContainer">
    <div class="header">
      <h2>运营位管理</h2>
      <p class="subtitle">共 {{ tableData.length }} 个运营位</p>
    </div>
    
    <el-table :data="tableData" style="width: 100%" v-loading="tableData.length === 0" empty-text="暂无数据">
      <el-table-column prop="id" label="ID" width="80" align="center" />
      
      <el-table-column label="封面" width="180" align="center">
        <template #default="scope">
          <el-image 
            style="width: 160px; height: 90px; border-radius: 4px;" 
            :src="scope.row.cover" 
            fit="cover"
            :preview-src-list="[scope.row.cover]"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <span>图片加载失败</span>
              </div>
            </template>
          </el-image>
        </template>
      </el-table-column>
      
      <el-table-column prop="name" label="运营位名称" width="180" show-overflow-tooltip />
      <el-table-column prop="content" label="运营语" width="240" show-overflow-tooltip />
      <el-table-column prop="uri" label="落地页" width="120" show-overflow-tooltip />
      <el-table-column prop="created_at" label="创建时间" width="200" />
      
      <el-table-column label="运营位状态" width="120" align="center">
        <template #default="scope">
          <el-tag 
            :type="scope.row.status === 0 ? 'info' : 'success'"
            size="large"
          >
            {{ scope.row.status === 0 ? '未启用' : '已启用' }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column label="操作" width="120" align="center" fixed="right">
        <template #default="scope">
          <el-button
            :type="scope.row.status === 0 ? 'primary' : 'danger'"
            size="small"
            @click="changeState(scope.row)"
            :loading="scope.row.loading"
          >
            {{ scope.row.status === 0 ? '开启' : '禁用' }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.contentContainer {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin-bottom: 20px;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header h2 {
  margin: 0;
  color: #303133;
  font-size: 24px;
}

.subtitle {
  margin: 5px 0 0 0;
  color: #909399;
  font-size: 14px;
}

.el-table {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.image-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 90px;
  background-color: #f5f7fa;
  border-radius: 4px;
  color: #c0c4cc;
}

.image-error .el-icon {
  font-size: 24px;
  margin-bottom: 5px;
}

.image-error span {
  font-size: 12px;
}

.el-button {
  border-radius: 4px;
}

.el-tag {
  border-radius: 4px;
}
</style>